<script>
// 数据详情页
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQrList'
})
</script>
<script setup>
import { ref, defineExpose } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { nameList, nameObj, diaTab } from '@/data'
const nameListA = ref(nameList)
const searchVal = ref('')
const search = () => {
	console.log('搜索客户')
}
const props = defineProps({
	type: {
		type: String,
		default: 'group'
	}
})
const tabType = ref(1)
const title = ref('')
const tab = ref([])
const nameObjN = ref({})
const activeType = ref(0)
if (props.type == 'group') {
	title.value = '群聊'
} else if (props.type == 'customer') {
	title.value = '客户'
	tab.value = [
		{
			name: '员工'
		},
		{
			name: '群聊'
		}
	]
	nameObjN.value = nameObj
} else if (props.type == 'staff') {
	title.value = '员工'
	tab.value = [
		{
			name: '客户'
		},
		{
			name: '同事'
		},
		{
			name: '群聊'
		}
	]
	nameObjN.value = nameObj
}
const total = ref(0)
const activeIndex = ref(0)
const selfTime = ref([])
const jump = (url) => {
	window.open(url)
}
</script>

<template>
	<div class="app-flex-left chat-page" style="margin:16px 0 0 14px">
		<div class="chat-center a-scorll" style="height:calc(100vh - 32px - 40px - 16px)" v-if="type != 'group'">
			<div class="chat-center-header chat-16">
				<div class="app-flex-left">
					<el-avatar shape="square" class="a-mr8" :size="36" :src="nameObjN.avatar" />
					<div class="chat-name">{{ nameObjN.name }}</div>
				</div>
			</div>
			<div class="chat-tab">
				<span
					@click="activeType = index"
					:class="[type == 'staff' ? 'chat-tab-item' : 'chat-tab-item2']"
					v-for="(item, index) in tab"
					:key="index"
				>
					<span :class="activeType == index ? 'chat-tab-active' : ''">{{ item.name }}</span>
				</span>
			</div>
			<el-input
				v-model="searchVal"
				style="padding: 0 16px;margin:14px 0;"
				class="a-mt12"
				size="large"
				@input="search"
				placeholder="请输入名称"
				clearable
				suffix-icon="Search"
			/>
			<div class="a-mt16">
				<div
					class="chat-left-cell"
					@click="activeIndex = index"
					:class="activeIndex == index ? 'chat-left-cell-active' : ''"
					v-for="(item, index) in nameListA"
					:key="index"
				>
					<el-avatar shape="square" class="a-mr8" :size="36" :src="item.avatar" />
					<div class="">
						<div class="chat-name app-flex-2" style="width: 160px">
							<span>{{ item.name }}</span>
							<span class="chat-time">7月15日</span>
						</div>
						<div class="chat-an-name">{{ item.rbacName }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="chat-right a-scorll" style="height:calc(100vh - 32px - 40px - 16px)" :class="type != 'group' ? 'chat3-right' : ''">
			<div class="chat-top app-flex-2">
				<div class="chat-top-left">
					<div>
						<span class="font-1">浓亮</span>
						<span>@微信</span>
					</div>
					<div class="chat-an-name">备注名：团团</div>
				</div>
				<div class="chat-top-right">
					<el-input
						v-model="searchVal"
						style="width: 200px"
						size="large"
						@input="search"
						placeholder="搜索消息"
						clearable
						suffix-icon="Search"
					/>
					<el-radio-group class="a-ml16" v-model="tabType" size="large">
						<el-radio-button :label="item.id" v-for="(item, index) in diaTab" :key="index">{{
							item.name
						}}</el-radio-button>
					</el-radio-group>
					<el-date-picker
						class="app-date-picker a-ml16"
						v-model="selfTime"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
					/>
				</div>
			</div>
			<div class="chat-tip">对方不同意存档会话内容，你将无法继续提供</div>
			<!-- <div class="chat-empty">
	暂无消息
</div> -->
			<div class="c-c-box">
				<div class="a-mb33" v-for="(item, index) in nameListA" :key="index">
					<div v-if="item.type == 'text'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="content-box-bull" :class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'">{{ item.text }}</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div
						v-else-if="item.type == 'emoji' || item.type == 'picText'"
						:class="item.isMe == 1 ? 'content-left' : 'content-right'"
					>
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div
							class="content-box-bull"
							:class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'"
							v-html="item.text"
						></div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-if="item.type == 'voice'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div>
							<div :class="item.isMe == 1 ? 'app-flex-left' : 'app-flex-right'">
								<span v-if="item.isMe != 1" class="c-sec">{{ item.second }}''</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="right" trigger="click">
									<div @click="item.showText = true" class="app-container pop-max-width app-pointer">转文字</div>
									<template #reference>
										<div class="content-box-bull" :class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'">
											<div :class="item.isMe == 1 ? 'c-arr-2' : 'c-arr-1'"></div>
										</div>
									</template>
								</el-popover>
								<span v-if="item.isMe == 1" class="c-sec">{{ item.second }}''</span>
							</div>
							<div
								class="content-box-bull co-mt6"
								v-if="item.showText"
								:class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'"
							>
								{{ item.text }}
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-else-if="item.type == 'img'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<el-image :src="item.url" class="co-img" />
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-else-if="item.type == 'video'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-vid" @click="jump(item.url)">
							<el-image :src="item.cover" class="co-vid" />
							<div class="c-arr-1 c-vid-center"></div>
							<div class="app-flex-2 c-vid-bottom">
								<div class="c-arr-1"></div>
								<div class="">{{ item.second }}</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-else-if="item.type == 'card'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card">
							<div class="app-flex-2 co-p16">
								<div class="app-flex-2-c" style="height: 60px">
									<div class="c-com">{{ item.companyName }}</div>
									<div class="c-name">{{ item.cardName }}</div>
								</div>
								<el-avatar shape="square" :src="item.cardAvatar" :size="60" />
							</div>
							<div class="co-ptip">个人名片</div>

							<div class="app-flex-2 c-vid-bottom">
								<div class="c-arr-1"></div>
								<div class="">{{ item.second }}</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.type == 'location'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-vid" @click="jump(item.url)">
							<el-image :src="item.cover" class="co-loc" />
							<div class="co-loc-bot">
								<div class="co-loc-text">{{ item.address }}</div>
								<div class="co-loc-text1">{{ item.detail }}</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-else-if="item.type == 'file'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card" @click="jump(item.url)">
							<div class="app-flex-2 co-p16" style="border-bottom: none">
								<div class="app-flex-2-c" style="height: 60px">
									<div class="c-fileName">{{ item.fileName }}</div>
									<div class="c-size">{{ item.size }}</div>
								</div>
								<el-avatar shape="square" :src="item.cardAvatar" :size="60" />
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-else-if="item.type == 'link'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card" @click="jump(item.url)">
							<div class="co-p16">
								<div class="c-fileName">{{ item.title }}</div>
								<div class="app-flex-right">
									<el-avatar shape="square" :src="item.cardAvatar" :size="60" />
								</div>
							</div>
							<div class="co-ptip app-flex-left">
								<div class="c-arr-2"></div>
								{{ item.source }}
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.type == 'mini'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card" @click="jump(item.url)">
							<div class="co-p16 app-flex-left" style="border: none">
								<el-avatar shape="circle" :src="item.cardAvatar" :size="30" />
								<span class="app-gap-words-left-s app-words-tip-weak">{{ item.cardName }}</span>
							</div>
							<div>
								<div class="c-fileName" style="margin-left: 16px">{{ item.title }}</div>
								<div class="co-p16">
									<el-image shape="square" :src="item.cover" :size="160" />
								</div>
							</div>
							<div class="co-ptip app-flex-left">
								<div class="c-arr-2"></div>
								{{ item.source }}
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.type == 'chat'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card">
							<div class="app-flex-2 co-p16" style="border-bottom: none">
								<div class="">
									<div class="c-fileName" style="margin-bottom: 6px">{{ item.title }}的聊天记录</div>
									<div class="c-size" v-for="(record, index) in item.records" :key="index">{{ record }}</div>
								</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.type == 'time'" class="content-time">{{ item.text }}</div>
					<div v-else-if="item.type == 'revoke'" class="app-flex-center">
						<div class="content-revoke c-rev-l">
							<span>你撤回了一条消息</span>
							<span class="c-rev-r">重新编辑</span>
						</div>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>
<style lang="scss">
@import url('@/style/app-component.scss');
@import '@/style/mixin.scss';
.el-input__wrapper {
	background: rgba(0, 0, 0, 0.04);
}
.a-scorll {
	overflow-y: auto;
	@include scrollBar;
}
.chat-page {
	.font-1 {
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #000000;
	}
	.font-2 {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #00c337;
	}
}
</style>
